<template>
  <div class="song-table">
    <el-table
      style="width: 100%"
      :data="songs"
      empty-text="数据加载中~"
      height="460"
      @row-dblclick="playMusic">
      <!-- 索引 或小喇叭 -->
      <el-table-column width="50">
        <template slot-scope="{row,$index}">
            <!-- 小喇叭 -->
            <span class="iconfont" :class="isPlaying ? 'icon-voice':'icon-jingyin_laba'" v-if="row.id == nowSongDetail.id"></span>
            <span v-else>{{$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column width="120">
        <template slot-scope="{row}">
          <div class="operation">
            <span 
              @click="likeSong(row)" 
              :class="likeSongIds.indexOf(row.id) !== -1 ?'iconfont icon-xihuan2':'iconfont icon-xihuan'"
              :title="likeSongIds.indexOf(row.id) !== -1 ? '取消喜欢':'添加喜欢'"
              ></span>
            <span class="iconfont icon-xiazai" title="下载"></span>
            <span class="el-icon-plus" @click="addSong(row)" title="添加到播放列表"></span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="歌曲" width="300">
        <template slot-scope="{ row }">
          <div class="songname">
            {{ row.name }}
            <i class="iconfont icon-vip" v-if="row.fee == 1"></i>
            <i class="iconfont icon-mv" v-if="row.mv != 0"></i>
          </div>
        </template>
      </el-table-column>
      <!-- 专辑名称 -->
      <el-table-column prop="al.name" label="专辑"></el-table-column>
      <!-- 歌手名 -->
      <el-table-column prop="ar[0].name" label="歌手"></el-table-column>
      <!-- 时长 -->
      <el-table-column prop="dt" label="时长">
        <template slot-scope="{ row }">
          <span>
            {{ row.dt | formatDuration }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  name: "SongTable",
  inject: ["reload"],
  props:{
    songs:{
      type:Array,
      default(){
        return [];
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    // 表格行双击行事件回调
    async playMusic(song){
      try {
        // 检查歌曲是否可用
        let isCheck = await this.$API.playmusic.checkMusic(song.id);
        if(isCheck.success){
            // 根据歌曲的id,获取歌曲的详情
           let songMessage = await this.$API.playmusic.getSongUrl(song.id);
           if(songMessage.code == 200){
                // 将歌曲的url存储在仓库
                this.$store.dispatch('saveSongUrl',songMessage.data[0].url);
                // 更新播放状态
                this.$store.dispatch('changePlayState',true);
                // 提交vuex保存当前歌曲的详情
                this.$store.dispatch('saveSongDetail',song);
                // 更新vuex添加到播放列表
                this.$store.dispatch('addPlayinglist',song);

           }else{
                this.$message({
                type:'error',
                message:'歌曲获取失败，请重试'
            })

           }
        }else{
            this.$message({
                type:'error',
                message:'不好意思,这首歌需要特权'
            })
        }
      } catch (error) {
        this.$message({
          type:'error',
          message:'亲爱的,暂无版权'
        })
      }  
    },
    // 添加歌曲回调
    addSong(song){
      // 将歌曲的信息存放在播放列表中
      this.$store.dispatch('addPlayinglist',song);
      this.$message({
        type:'success',
        message:'添加成功'
      })
    },
    // 喜欢和取消喜欢事件回调
    async likeSong(row){
      try {
        let isLike = this.likeSongIds.indexOf(row.id) == -1 ? true : false;
        // 取消喜欢时弹出
        if(!isLike){
          this.$confirm('确定要取消喜欢吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then( async () => {
                let result = await this.$API.playmusic.setLikeSong(row.id,isLike);
                if(result.code == 200){
                  this.likeSongIds.splice(this.likeSongIds.indexOf(row.id),1)
                }
                this.$message({
                  type: 'success',
                  message: '取消成功!'
                });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消'
                });          
              });
        }else{
          let result = await this.$API.playmusic.setLikeSong(row.id,isLike);
          if(result.code == 200){
            this.likeSongIds.push(row.id);
          } 
        }
        // 保存到仓库，保存到本地
        this.setItem('likeSongIds',this.likeSongIds);
        this.$store.dispatch('saveLikeSongIds',this.likeSongIds);
      } catch (error) {
        this.$message({
          type:'error',
          message:'添加喜欢失败'
        })
      }
    }
  },
  created() {},
  computed:{
    ...mapState({
      // 获取当前播放的状态
      isPlaying: (state) => {
        return state.playmusic.isPlaying;
      },
      // 获取当个播放的音乐的信息
      nowSongDetail: (state) => {
        return state.playmusic.nowSongDetail;
      },
      // 获取当前喜欢歌曲歌单
      likeSongIds:(state) =>{
        return state.userSong.likeSongIds
      },
      // 获取当前歌单的信息
      userSongList:state => state.userSong.userSongList
      
    })
  },
  watch:{
    likeSongIds(){
      // 只有在我喜欢歌单中取消喜欢才页面刷新
      if(this.userSongList[0].id == this.$route.params.id){
        this.reload();
      }
      
    }
  }
};
</script>
<style lang="less" scoped>
.operation{
  .icon-xihuan2 {
    	font-size: 16px;
      color: var(--themeColor);
  }
  .icon-xihuan,
	.el-icon-plus {
		font-size: 15px;
		color: #999;
		font-weight: 700;
	}
  
  span{
        margin-right: 10px;
        cursor: pointer;
        &:hover{
          color: var(--themeColor);
        }
    }
}
.icon-voice,
.icon-jingyin_laba {
	color: var(--themeColor);
}
.songname{
    i{
        margin-right: 5px;
        color: rgb(18, 115, 243);
        font-size: 16px;
        font-weight: 20px;
    }
}
</style>